import { FC } from "react";
import { allChatIds } from "../../indexdb";
import { useAppState } from "../provider/context";

//#region component Types
export interface ConversationProps {}
//#endregion component Types

//#region component
export const Conversation: FC<ConversationProps> = () => {
  const { chatId, setChatId } = useAppState();
  return (
    <div
      style={{
        height: "100%",
        overflowY: "auto",
        border: "1px solid #000",
        borderRight: "none",
        flex: "none",
      }}
    >
      {allChatIds.map((_chatId) => {
        return (
          <div
            className="conversation"
            key={_chatId}
            style={{
              padding: "8px 26px",
              textAlign: "center",
              borderBottom: "1px solid #000",
              userSelect: "none",
              cursor: "pointer",
              backgroundColor: chatId === _chatId ? "#0960cb" : "#fff",
              color: chatId === _chatId ? "#fff" : "#000",
            }}
            onClick={() => {
              setChatId(_chatId);
            }}
          >
            <div>{_chatId}</div>
          </div>
        );
      })}
    </div>
  );
};
//#endregion component
